<template>
  <div class="front">
    <el-collapse v-model="activeNames" class="front-collapse"
      @change="activeNames = !activeNames; collapseName == '收起' ? collapseName = '展开' : collapseName = '收起'">
      <el-collapse-item :title="collapseName" class="collapse-1" name="1">
        <el-form :model="searchForm" label-width="120px">
          <el-form-item label="货品编码" class="front-input">
            <el-input v-model="searchForm.jadeCode" />
          </el-form-item>
          <!-- <el-form-item label="货品状态" class="front-input">
            <el-select v-model="searchForm.inventoryStatus" placeholder="搜索匹配" style="">
              <el-option label="在仓" value="在仓" /><el-option label="已借出" value="已借出" /><el-option label="市场已还"
                value="2" /><el-option label="已售出" value="3" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="所属仓库" class="front-input">
            <el-select v-model="searchForm.warehouseId" placeholder="搜索匹配" style="">
              <el-option v-for="item in warehouseList" :key="item.id" :label="item.warehouseName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="供应商" class="front-input">
            <el-select v-model="searchForm.supplierId" placeholder="搜索匹配" style="" prop="supplierId">
              <el-option v-for="item in supplierList" :key="item.id" :label="item.supplierName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="primary" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>
  </div>

  <div class="tail">
    <div class="tail-action">
      <el-button type="primary">批量改价</el-button>
      <el-button type="primary">导出列表</el-button>
      <el-button type="primary">打印</el-button>
      <el-popover placement="bottom" trigger="click">
        <template #reference>
          <el-button><el-icon>
              <List />
            </el-icon>显示设置</el-button>
        </template>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="selectedFilters" @change="handleCheckChange">
          <el-checkbox v-for="item in tableFilter.map(i => i.label)" :label="item" :key="item" />
        </el-checkbox-group>
      </el-popover>
    </div>
    <el-table :data="tableData()" border style="width: 100%" :max-height="collapseName == '收起' ? 400 : 650">
      <template v-slot:empty>
        <div class="no-data">暂无数据</div>
      </template>
      <el-table-column type="selection" width="40" />
      <el-table-column label='货品图片' width="100">
        <template #default="scope">
          <el-image :src="'http://8.134.106.197:9001/profile' + scope.row.imageUrl" fit="contain"
            style="max-height: 70px;max-width: 50px;" :preview-teleported="true" :lazy="true"
            :preview-src-list="imgPreview" @click="previewSrcList(scope.row.imageUrl)"></el-image>
        </template>
      </el-table-column>
      <el-table-column v-for="item in inventoryDataColumn" :prop="item.prop" :min-width="item.minWidth"
        :width="item.width" :max-width="item.maxWidth" :label="item.label">
        <template v-if="true" v-slot:default="scope">
        <div size="small" v-if="item.prop == 'storageName'">
          <span v-if="scope.row['warehouseName']">{{ scope.row['warehouseName'] }}</span>
          <span v-if="scope.row[item.prop]"> / {{ scope.row[item.prop]}}</span>
        </div>
        <div size="small" v-if="item.prop == 'jadeCode'" class="cell-container"><!--wxr24/5/27货品编码复制-->
      <span>{{ scope.row.jadeCode }}</span> 
      <button @click="handleCopy(scope.row.jadeCode)" class="copy-button">复制</button>
        </div>
        <span v-else>{{ scope.row[item.prop] }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="80" fixed="right">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="printTag(scope.row)">打印标签</el-button>
        <el-button link type="primary" size="small" @click="openDetails(scope.row)">查看明细</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
    <el-pagination v-model:current-page="data.page" v-model:page-size="data.limit"
      layout="prev, pager, next ,total,sizes" v-model:total="data.total" @current-change="handleCurrentChange"
      @size-change="handleSizeChange" />
  </div>
</div>
<div class="dialog-list">
  <div>
    <el-drawer v-model="drawer" :direction="direction" size="35%">
      <el-descriptions border size="large" direction="vertical" title="货品详情">
        <el-descriptions-item label="图片"><el-image :src="'http://8.134.106.197:9001/profile' + rowDetails.imageUrl"
            style="height: 120px;width: 90px;" :preview-src-list="imgPreview"
            @click="previewSrcList(scope.row.imageUrl)"></el-image></el-descriptions-item>
        <el-descriptions-item label="货品编码">{{ rowDetails.jadeCode }}</el-descriptions-item>
        <el-descriptions-item label="入库单号">{{ rowDetails.orderCode }}</el-descriptions-item>
        <el-descriptions-item label="数量">{{ rowDetails.jadeWeight }}</el-descriptions-item>
        <el-descriptions-item label="供应商" width="150">{{ rowDetails.supplierName }}</el-descriptions-item>
        <el-descriptions-item label="货品状态">{{ rowDetails.inventoryStatus }}</el-descriptions-item>
        <el-descriptions-item label="仓位名字" width="150">{{ rowDetails.storageName }}</el-descriptions-item>
        <el-descriptions-item label="仓库名字">{{ rowDetails.warehouseName }}</el-descriptions-item>
        <el-descriptions-item label="入库时间">{{ rowDetails.createTime }}</el-descriptions-item>
        <el-descriptions-item label="添加人">{{ rowDetails.createBy }}</el-descriptions-item>
      </el-descriptions>
    </el-drawer>
  </div>
</div></template>
  
<script>
import { defineComponent, reactive, toRefs, ref } from "vue";
import '@/mock/inbound.js'  //mock模拟，后未使用
import { onMounted, onBeforeMount } from "vue";
import { getJadeList, getJadeStatusList } from '@/api/inventory/inventory'
import { getSupplierList } from "@/api/user/user"
import { getWarehouseList } from '@/api/setting/setting';
import { List } from '@element-plus/icons-vue';
export default defineComponent({
  name: "jadeInboundList",
  components: {
    List
  },
  setup() {
    const rowDetails = ref({})
    const drawer = ref(false)
    const isIndeterminate = ref(false)
    const checkAll = ref(true)//显示设置是否全选
    const searchForm = reactive({  //入库表单数据
      jadeCode: '',
      inventoryStatus: '',
      warehouseId: '',
      supplierId: '',
    })
    const jadeListData = ref([]);//翡翠列表数据
    const selectedFilters = ref([])//选中的列
    const inventoryDataColumn = ref([])//表头数据
    const supplierList = ref([])//供应商列表
    const warehouseList = ref([])//仓库列表
    const statusList = ref([])//货品状态列表
    const imgPreview = ref([])
    const tableFilter = ref([//表头
      { label: '货品编码', prop: 'jadeCode', width: '100', isSelected: true },
      { label: '数量', prop: 'jadeQuantity', width: '90', isSelected: true },
      { label: '品类', prop: 'jadeTypeName', width: '120', isSelected: true },
      { label: '成本价', prop: 'jadeCost', width: '90', isSelected: true },
      { label: '标签价', prop: 'jadeTagPrice', Width: '90', isSelected: true },
      { label: '供应商', prop: 'supplierName', width: '90', isSelected: true },
      { label: '货品状态', prop: 'inventoryStatus', width: '120', isSelected: true },
      { label: '仓库/仓位', prop: 'storageName', width: '200', isSelected: true },
      { label: '采购方式', prop: 'orderType', width: '120', isSelected: true },
      { label: '入库人员', prop: 'createBy', width: '120', isSelected: true },
      { label: '入库时间', prop: 'createTime', minWidth: '100', isSelected: true },
      { label: '备注', prop: 'remark', minWidth: '80', maxWidth: '80', isSelected: true },
    ])

    const collapseName = ref('展开');
    const activeNames = ref(false)

    //分页处理
    const state = reactive({//表格用到的参数
      data: {
        page: 1,
        limit: 10,
        total: jadeListData.value.length,
      }
    });
    const tableData = () => {
      return jadeListData.value
    };
    const handleCurrentChange = (e) => {//改变页码
      state.data.page = e;
      handleGetJadeList(e, state.data.limit)
    };
    const handleSizeChange = (e) => {//改变页数限制
      state.data.limit = e;
      handleGetJadeList(state.data.page, e)
    };
    const handleGetJadeList = (page, limit) => {//获取货品列表
      getJadeList(page, limit).then((res) => {
        jadeListData.value = res.rows
        state.data.total = res.total
      })
    }

    onBeforeMount(() => {
      getSupplierList().then((res) => {
        supplierList.value = res.rows
      })
      getJadeStatusList().then((res) => {
        statusList.value = res.rows
      })
      getWarehouseList().then((res) => {
        warehouseList.value = res.rows
      })
      handleGetJadeList(state.data.page, state.data.limit)
    })


    onMounted(() => {
      tableFilter.value.forEach(function (item, index) {
        if (item.isSelected) {
          selectedFilters.value.push(item.label)
          inventoryDataColumn.value.push(item)
        }
      })
    })
    const handleCheckAllChange = (val) => {//全选按钮
      inventoryDataColumn.value = []
      selectedFilters.value = []
      isIndeterminate.value = false;
      if (val) {
        tableFilter.value.forEach(item => {
          item.isSelected = val
          inventoryDataColumn.value.push(item)
          selectedFilters.value.push(item.label)
        })
      }

    }
    const handleCheckChange = (val) => {//设置勾选列状态
      console.log(val)
      let temp = []
      tableFilter.value.forEach(item_t => {
        selectedFilters.value.forEach(item_s => {
          if (item_t.label == item_s) {
            temp.push(item_t)
          }
        })
      })
      if (temp.length < tableFilter.value.length && temp.length > 0) {
        isIndeterminate.value = true
      } else {
        isIndeterminate.value = false
      }
      inventoryDataColumn.value = temp
      selectedFilters.value = inventoryDataColumn.value.map(item => item.label)
    }
    const previewSrcList = (imgUrl) => {
      imgPreview.value = []
      imgPreview.value.push('http://8.134.106.197:9001/profile' + imgUrl)
    }


    const openDetails = (row) => { //查看明细
      drawer.value = true
      rowDetails.value = row
    }

    const printTag = (row) => { //打印标签
      drawer.value = true
      rowDetails.value = row
    }
    const onReset = () => {
      searchForm.jadeCode = searchForm.supplierId = searchForm.warehouseId = searchForm.inventoryStatus = ''
    }
    const onSearch = () => {
      getJadeList(state.data.page, state.data.limit, searchForm.jadeCode, searchForm.supplierId, searchForm.warehouseId).then((res) => {
        jadeListData.value = res.rows
        state.data.total = res.total
      })
    }
     const handleCopy = (jadeCode) => {  //<!--wxr24/5/27货品编码复制-->
      try {
      navigator.clipboard.writeText(jadeCode);
      alert('货品编码已复制到剪切板');
    } catch (error) {
      console.error('复制货品编码失败：', error);
      alert('复制货品编码失败');
    }
  }
    return {
      jadeListData, imgPreview,
      searchForm, rowDetails, drawer,
      collapseName, supplierList, warehouseList, statusList,
      activeNames,
      inventoryDataColumn, selectedFilters, tableFilter, checkAll, isIndeterminate,
      tableData, onSearch, printTag, onReset,
      handleCurrentChange, previewSrcList, handleCheckAllChange, handleCheckChange,
      handleSizeChange, handleGetJadeList, openDetails,
      ...toRefs(state),
      handleCopy//<!--wxr24/5/27货品编码复制-->
    };
  },
});


</script>
  #F8F8F8
  
<style rel="stylesheet/scss" lang="scss" scoped>
.front {
  background-color: #FFF;
  padding: 10px;

  .front-input {
    width: 320px;
  }
}

.center {
  margin-top: 10px;
  // border-top: 1px solid var(--el-border-color);
  // border-bottom: 1px solid var(--el-border-color);
}

.tail {
  background-color: #FFF;
  margin-top: 40px;
  padding: 10px;
}

.tail-action {
  display: flex;
  margin-bottom: 10px;
}


.center .center-data {
  height: 30px;
  width: 150px;
  border: 1px solid;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
  font-size: 20px;
  background-color: #72f6ff;
}

.el-table {
  .el-button {
    margin-left: 0px; //调整按钮不对齐
  }
}
</style>
  